/**
参考网址：

绘制路线轨迹
*/


<template>
    <div id="content">
        <div id="map" ref="map"/>
    </div>
</template>

<script>
    import "ol/ol.css";
    import {Map, Feature, View} from "ol";

    import TileLayer from "ol/layer/Tile";
    import VectorLayer from "ol/layer/Vector";
    import VectorSource from "ol/source/Vector";
    import {Style, Stroke, Fill, Circle as CircleStyle, Text} from "ol/style";
    import {LineString, Point} from "ol/geom";
    import XYZ from "ol/source/XYZ";
    import { /*get, */transform,  toLonLat,fromLonLat,/* getTransform, METERS_PER_UNIT*/} from "ol/proj";
     import * as olProj from "ol/proj";

    import {roadJsonDemoGeo} from './data.js'
    //模拟数据

    export default {
        data() {
            return {
                map: null,
            };
        },
        mounted() {
            this.initMap(); //初始化地图
            this.drawRoad2();
        },
        methods: {

            drawRoad2() {
                let result = roadJsonDemoGeo;
                //  $.get("../data/route.json",null,function(result) {//真实数据通过接口获取
                //console.log(result);
                let startPostion = result.waypoints[0], endPostion = result.waypoints[1];
                var startC = transform([startPostion.location[0], startPostion.location[1]], "EPSG:4326", "EPSG:3857"),
                    endC = transform([endPostion.location[0], endPostion.location[1]], "EPSG:4326", "EPSG:3857");
                var startF = new Feature(new Point(startC));
                startF.name = startPostion.name;
                var endF = new Feature(new Point(endC));
                endF.name = endPostion.name;

                var features = [startF, endF];
                var routes = result.routes;//路线数组
                for (var i = 0; i < routes.length; i++) {//目前只有一条
                    var _route = routes[i];
                    var _coordinates = _route.geometry.coordinates;
                    var _coord = [];
                    for (var j = 0; j < _coordinates.length; j++) {
                        console.log('绘制路线：', _coordinates[j]);
                        _coord.push(transform(_coordinates[j], "EPSG:4326", "EPSG:3857"))
                    }
                    var pathF = new Feature(new LineString(_coord));
                    features.push(pathF);
                }
                var vectorSource = new VectorSource({
                    features: features
                });
                var vector = new VectorLayer({
                    className: 'roadClassName',
                    source: vectorSource,
                    style: function (feature) {
                        var _name = feature.name;
                        var _color = "red";
                        if (_name === "蓝靛厂南路") {
                            _color = "green";
                        } else if (_name === "太阳宫北街") {
                            _color = "red";
                        }
                        return new Style({
                            image: new CircleStyle({
                                radius: 15,
                                fill: new Fill({
                                    color: _color,
                                })
                            }),
                            stroke: new Stroke({
                                color: _color,
                                width: 5,
                                lineDash: [10, 8]
                            }),
                            text: new Text({
                                text: _name,
                                font: "bold 15px 微软雅黑",
                                fill: new Fill({
                                    color: 'red'
                                }),
                                textAlign: "center",
                                textBaseline: "middle"
                            })
                        });//#return
                    }
                });//#vector
                this.map.addLayer(vector);
                console.log(this.map.getLayers());
                // }
            },

            /**
             * 初始化一个 openlayers 地图
             */
            initMap() {
                const target = "map"; // 跟页面元素的 id 绑定来进行渲染
                const tileLayer = [
                    new TileLayer({
                        source: new XYZ({
                            url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
                        }),
                        projection: "EPSG:3857",
                    }),
                ];
                this.map = new Map({
                    target: target, // 绑定dom元素进行渲染
                    layers: tileLayer, // 配置地图数据源
                    view: new View({
                        center: olProj.fromLonLat([116.38764831760129, 39.94432059178996]),
                        zoom: 12,
                    }),
                });

                this.map.on('singleclick', e => {
                    console.log('click the map get coordinate', transform(e.coordinate, "EPSG:3857", "EPSG:4326"));
                    console.log('click the map get coordinate-toLonLat: ', toLonLat(e.coordinate));
                    console.log('click the map get coordinate-fromLonLat: ', fromLonLat(toLonLat(e.coordinate)));

                });
            },
        },
    };
</script>
<style lang="scss" scoped>
    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    /*移除OSM的链接*/
    :deep(.ol-attribution) {
        display: none;
    }
</style>